<template>
  <div v-if="isView && multiple">
    <!-- 详情弹窗处理多选项展示 -->
    <div class="view-text">{{ getSelectLabel(selectValue, options) }}</div>
  </div>
  <el-select
    v-else
    v-model="selectValue"
    :disabled="disabled"
    :clearable="clearable"
    :placeholder="placeholder"
    :multiple="multiple"
    :filterable="filterable"
    :collapse-tags="multiple"
    @change="selectHandle"
  >
    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
  </el-select>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue';
import { getSelectLabel } from '@u/filterData/index';
import { OptionsItem } from './types';

const props = defineProps({
  modelValue: {
    type: [String, Array],
  },
  options: {
    type: Array<OptionsItem>,
    default: () => [],
  },
  isView: {
    type: Boolean,
    default: false,
  },
  filterable: {
    type: Boolean,
    default: true,
  },
  placeholder: {
    type: String,
    default: '请选择',
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  clearable: {
    type: Boolean,
    default: true,
  },
  multiple: {
    type: Boolean,
    default: false,
  },
});
const emit = defineEmits(['update:modelValue', 'change']);

const selectValue = ref();

watch(
  () => props.modelValue,
  (newVal) => {
    if (newVal !== selectValue.value) {
      selectValue.value = newVal;
    }
  },
  { immediate: true },
);

const selectHandle = (val: string | number) => {
  emit('update:modelValue', val);
  emit('change', val);
};
</script>
<style lang="scss" scoped>
.view-text {
  text-align: left;
  padding-left: 15px;
}
</style>
